<template>
  <div id="Home_body">
    <div id="ClassiFication_One">
      <div class="CFTitle">为你推荐 <el-button size="mini" style="margin-left:953px" type="primary" round>换一批</el-button></div>
      <div>
        <a v-for="(Comis, index) in ListOne" :key="Comis.ComicID"
          v-bind:href="'/daliet/' + Comis.ComicID">
            <m-hdiv v-if="(index+1)%6 == 0" :MH="Comis" class="MH-div-one-Six">

            </m-hdiv>
            <m-hdiv v-else :MH="Comis">
            </m-hdiv>
        </a>
      </div>
    </div>
    <div id="ClassiFication_Two">
      <div class="CFTitle">搞笑暴漫 <el-button size="mini" style="margin-left:960px" type="primary" round>更多</el-button></div>
      <div>
        <a v-for="(Comis, index) in listTwo" :key="Comis.ComicID"
          v-bind:href="'/daliet/' + Comis.ComicID">
            <m-hdiv v-if="(index+1)%6 == 0" :MH="Comis" class="MH-div-one-Six">

            </m-hdiv>
            <m-hdiv v-else :MH="Comis">
            </m-hdiv>
        </a>
      </div>
    </div>
    <div id="ClassiFication_There">
      <div class="CFTitle">冒险传说 <el-button size="mini" style="margin-left:960px" type="primary" round>更多</el-button></div>
      <div>
        <a v-for="(Comis, index) in listThere" :key="Comis.ComicID"
          v-bind:href="'/daliet/' + Comis.ComicID">
            <m-hdiv v-if="(index+1)%6 == 0" :MH="Comis" class="MH-div-one-Six">

            </m-hdiv>
            <m-hdiv v-else :MH="Comis">
            </m-hdiv>
        </a>
      </div>
    </div>
    <div id="ClassiFication_Four">
      <div class="CFTitle">恋爱物语 <el-button size="mini" style="margin-left:960px" type="primary" round>更多</el-button></div>
      <div>
        <a v-for="(Comis, index) in listFous" :key="Comis.ComicID"
          v-bind:href="'/daliet/' + Comis.ComicID">
            <m-hdiv v-if="(index+1)%6 == 0" :MH="Comis" class="MH-div-one-Six">

            </m-hdiv>
            <m-hdiv v-else :MH="Comis">
            </m-hdiv>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import MHdiv from "../components/MHdiv.vue";

export default {
  name: "Recommend",
  components: {
    MHdiv,
  },
  data() {
    return {
      ListOne: [],
      listTwo: [],
      listThere: [],
      listFous: [],
    };
  },
  created() {
    this.ListOne = [{
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "死亡笔记",
        ComicCtentent: "死亡笔记666",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "海贼王666",
      },
      {
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicClass: "",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "热血",
        ComicCtentent: "奇幻",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "搞笑",
      },
    ];
    this.listTwo=[{
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicClass: "",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "热血",
        ComicCtentent: "奇幻",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "搞笑",
      },];
      this.listThere=[{
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicClass: "",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "热血",
        ComicCtentent: "奇幻",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "搞笑",
      },]
      this.listFous=[{
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicClass: "",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "热血",
        ComicCtentent: "奇幻",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "搞笑",
      },]
  },
};
</script>



<style>

/* 首页身体 */
#Home_body {
  width: 1160px;
  margin: 0px auto;
}
/* 首页为你推荐 */
#ClassiFication_One,#ClassiFication_Two,#ClassiFication_There,#ClassiFication_Four {
  padding-top: 35px;
}
/* 分类文字 */
.CFTitle {
  font-size: 32px;
  color: rgb(0, 0,0, 0.87);
  padding-bottom:17px ;
}
.MH-div-one-Six {
  width: 180px;
  padding-right: 0px;
}
* {
  margin: 0px;

  padding: 0px;
}
</style>